<template>
  <el-container>
    <el-header class="head">
      <h2 class="title">依云商城后台管理</h2>
      <div class="oper">
        <p>欢迎您，admin</p>
        <el-button @click="offLogin" class="btn" type="success">注销登录</el-button>
        <el-button @click="goShade" class="btn" type="info" icon="el-icon-setting"></el-button>
      </div>
    </el-header>
    <el-container >
      <el-aside width="auto">
        <el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
          <!--            <el-radio-button style="background: #409EFF" :label="true">收起</el-radio-button>-->
          <span @click="dianji" v-if="!isCollapse" style="background: #409EFF;height: 30px; width:190px;display: block;color:#fff;text-align: center;font-size:14px;line-height: 30px;border-radius: 4px;"> 收起 </span>
          <span @click="dianji" v-if="isCollapse" style="background: #409EFF;height: 30px;width: 65px;display: block;color:#fff;text-align: center;font-size:14px;line-height: 30px;border-radius: 4px;"> > </span>
        </el-radio-group>
        <el-menu
            :default-active="this.$route.path"
            :collapse="isCollapse"
            class="el-menu-vertical-demo"
            @select="handleSelect"
            background-color="#fff"
            text-color="#000"
            router
            unique-opened
            active-text-color="rgb(64, 158, 255)">
          <el-submenu index="/">
            <template slot="title">
              <i class="el-icon-s-home"></i>
              <span slot="title">用户管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/home/user/addProduct"><i class="el-icon-s-operation"></i>用户列表</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-s-goods"></i>
              <span slot="title">权限列表</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/home/pms/product"><i class="el-icon-s-open"></i>角色权限</el-menu-item>
              <el-menu-item index="/home/pms/productCate"><i class="el-icon-s-ticket"></i>权限列表</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="3">
            <template slot="title">
              <i class="el-icon-tickets"></i>
              <span slot="title">商品管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/home/oms/order"><i class="el-icon-s-unfold"></i>商品列表</el-menu-item>
              <el-menu-item index="/home/oms/orderSetting"><i class="el-icon-s-tools"></i>分类参数</el-menu-item>
              <el-menu-item index="/home/oms/brand"><i class="el-icon-s-grid"></i>商品分类</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="4">
            <template slot="title">
              <i class="el-icon-star-on"></i>
              <span slot="title">订单管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/home/sms/visitor"><i class="el-icon-document-add"></i>订单列表</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="5">
            <template slot="title">
              <i class="el-icon-edit"></i>
              <span slot="title">数据统计</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/home/ums/vueEdit"><i class="el-icon-mobile"></i>数据报表</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-container>
        <div>
          <router-view/>
        </div>
      </el-container>
    </el-container>
  </el-container>
</template>

<script>
export default {
  name: "AppHome",
  data() {
    return {
      isCollapse: false,
    };
  },
  methods: {
    handleSelect(key, keyPath) {
    },
    goShade() {
      this.$router.push("/shade");
    },
    dianji(){
      this.isCollapse = !this.isCollapse
    },
    // offLogin() {
    //   this.$store.commit("delToken")
    //   this.$router.go(0)
    // },
    offLogin() {
      this.$confirm('将注销此次登录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '成功退出登录!'
        });
        this.$store.commit("delToken")
        this.$router.go(0)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消操作'
        });          
      });
    }
  }
}
</script>

<style lang="scss" scoped>
*{
  margin: 0;
  padding: 0;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 190px;
  min-height: 600px;
}
.head {
  height: 8vh !important;
  padding: 0 20px;
  background-image: linear-gradient(180deg,#00BCD4 40%,#2097F2 100%);
  line-height: 8vh;
  margin: 2px 0;
  .title {
    float: left;
    color: #fff;
    font-size: 28px;
  }
  .btn {
    padding: 10px 15px;
  }
  .oper {
    float: right;
    * {
      float: left;
    }
    p {
      margin-right: 10px;
      color: #fff;
      font-size: 17px;
    }
    .btn {
      padding: 10px 15px;
      margin-top: 4vh;
      transform: translateY(-2vh);
    }
  }
}
</style>